
<template>
   <el-form ref="form" :model="data"  :rules="rules" label-width="100px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基础信息" name="first">
              <el-form-item label="分类" prop="cate_id">
                 <el-select v-model.trim="data.cate_id"  filterable placeholder="请选择分类" clearable  class="filter-item" >
                      <el-option  :label="item.html + item.cate_name" :value="item.id" v-for="(item,idx) in category" :key="idx" ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="商品名称" prop="store_name">
                  <el-input v-model.trim="data.store_name" placeholder="请填写商品名称" />
              </el-form-item>
              <el-form-item label="关键字" prop="keyword">
                    <el-input v-model.trim="data.keyword" placeholder="请填写关键字" />
              </el-form-item>
              <el-form-item label="单位" prop="unit_name">
                    <el-input v-model.trim="data.unit_name" placeholder="请填写单位" />
              </el-form-item>
              <el-form-item label="简介" prop="store_info">
                    <el-input type="textarea" v-model.trim="data.store_info" placeholder="请填写简介"  rows="6" />
              </el-form-item>
              <el-form-item label="视频介绍" prop="video_link">
                  <el-upload
              action="#"
              ref="video_link" :auto-upload="false" :file-list = "data.video_linkfileList" :on-change="videoChangevideo_link" class="avatar-uploader"  accept=".mp4" :on-remove="handleRemovevideo_link">
              <video ref="video_link"  v-if="data.video_link"  controls style="width: 320px;height: 180px;" :src="data.video_link"></video>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              <el-progress  v-show="data.video_linkpercentage>0 && data.video_linkpercentage<100" :percentage="data.video_linkpercentage" :text-inside="true" :stroke-width="18"></el-progress>
              </el-form-item>
                            <el-form-item label="缩略图" prop="image" >
                        <el-upload
                    :action="$store.state.settings.file_upload_url"
                    :headers ="headerObj"
                    :limit=1
                    list-type="picture-card"
                    :file-list="data.imagefileList"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    :on-success="handleimageSuccess"
                    :before-upload="beforeimageUpload"
                    :on-exceed="handleimageExceed"
                    :on-preview="handleimagePreview"
                    :on-remove="handleimageRemove">
                    <i class="el-icon-plus"></i>
                    </el-upload>
              </el-form-item>
              <el-form-item label="轮播图" prop="slider_image">
                          <el-upload
                      :action="$store.state.settings.file_upload_url"
                      :headers ="headerObj"
                      multiple
                      list-type="picture-card"
                      :on-preview="handleslider_imagePreview"
                      :file-list="data.slider_imagefileList"
                      accept="image/png, image/jpeg, image/gif, image/jpg"
                      :on-success="handleslider_imageSuccess"
                      :on-remove="handleslider_imageRemove"
                      >
                      <i class="el-icon-plus"></i>
                      </el-upload>
              </el-form-item>
              <el-form-item label="商品规格" prop="spec_type">
                  <el-radio v-model="data.spec_type" :label="0">单规格</el-radio>
                  <el-radio v-model="data.spec_type" :label="1">多规格</el-radio>
              </el-form-item>  
              <el-form-item v-if="data.spec_type == 0" >
                      <el-table
                        border
                        :data="data.attr"
                        style="width: 100%">
                        <el-table-column  label="图片"  width="120"  header-align="center" style="text-align:center">
                              <template slot-scope="scope">
                                  <el-upload
                                  style="text-align:center"
                                    class="avatar-uploader"
                                  :action="$store.state.settings.file_upload_url"
                                  :headers ="headerObj"
                                  :show-file-list="false"
                                  accept="image/png, image/jpeg, image/gif, image/jpg"
                                  :on-success="handlepicSuccess">
                                    <img v-if="scope.row.pic" :src="scope.row.pic" class="avatar" style="width:60px;height:60px">
                                    <i v-else class="el-icon-plus avatar-uploader-icon" style="width:60px;height:60px;line-height:60px"></i>
                                  </el-upload>
                              </template>
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                          label="售价"
                          >
                          <template slot-scope="scope">
                                <el-input v-model="scope.row.price" clearable placeholder="请输入商品售价"></el-input>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column
                        header-align="center"
                          label="成本价"
                          >
                          <template slot-scope="scope">
                                <el-input v-model="scope.row.cost"  clearable placeholder="请输入商品成本价"></el-input>
                          </template>
                        </el-table-column> -->
                        <el-table-column
                        header-align="center"
                          label="原价"
                          >
                          <template slot-scope="scope">
                                <el-input v-model="scope.row.ot_price" clearable placeholder="请输入商品原价"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                          label="库存"
                          >
                          <template slot-scope="scope">
                                <el-input v-model="scope.row.stock" clearable placeholder="请输入库存"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                          label="产品编号"
                          >
                          <template slot-scope="scope">
                                <el-input v-model="scope.row.bar_code" clearable placeholder="请输入产品编号"></el-input>
                          </template>
                        </el-table-column>
                      </el-table>
              </el-form-item>    
              <el-form-item label="规则模板" v-if="data.spec_type == 1">
                <el-select  placeholder="请选择模板" v-model="ruleIndex" clearable  class="filter-item" >
                      <el-option  :label="item.rule_name" :value="idx" v-for="(item,idx) in rule_list" :key="idx" ></el-option>
                  </el-select>
                    <el-button type="primary" style="margin-left:10px" @click="allRule">确认</el-button>
              </el-form-item>  
              <div v-if="data.spec_type == 1">
                  <div  v-for="(item,index) in data.items" :key="index" >
                    <el-tag closable  type="success" style="margin-bottom:10px;margin-left:120px;"  @close="deleteItem(index)" >{{item.value}}</el-tag>
                    <div style="display:flex;align-items:center;margin-left:120px;flex-wrap: wrap;">
                        <el-tag closable style="margin-bottom:10px;margin-right:5px;" size="small" v-for="(val,inx) in item.detail" :key="inx" @close="deleteValue(item,inx)" >{{val}}
                        </el-tag>
                        <el-input v-model="item.detailValue" size="mini" style="width:120px;margin-bottom:10px" clearable placeholder="请输入"></el-input>
                          <el-button type="text"  @click="addDetail(item)" style="margin-bottom:10px;margin-left:22px">添加</el-button>
                    </div>
                </div> 
              </div>  
                
              <div style="display:flex;align-items:center" v-if="newRule">
                  <el-form-item label="规格">
                      <el-input  v-model="formDynamic.attrsName" placeholder="请输入规格" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="规格值：">
                      <el-input v-model="formDynamic.attrsVal" placeholder="请输入规格值" clearable></el-input>
                  </el-form-item>
                  <el-button type="text"  @click="createAttrName" style="margin-bottom:22px;margin-left:22px">添加</el-button>
                  <el-button type="text" @click="newRule = false"  style="margin-bottom:22px">取消</el-button>
              </div> 
              <div style="display:flex;align-items:center;margin-left:120px" v-if="newRule == false  && ruleBool == true && data.spec_type == 1 ">
                  <el-button type="primary"  size="small"  @click="newRule = true" style="margin-bottom:22px;margin-left:22px">添加新规格</el-button>
                  <el-button type="success"  size="small" @click="generates"  style="margin-bottom:22px">立即生成</el-button>
              </div>  
              <el-form-item :label="'批量设置'" v-if="data.attrs.length && formHeader.length  && data.spec_type == 1"  >
                    <el-table
                      border
                      :data="batchAttr"
                      style="width: 100%">
                      <el-table-column  label="图片"  width="120"  header-align="center" style="text-align:center">
                            <template slot-scope="scope">
                                <el-upload
                                style="text-align:center"
                                  class="avatar-uploader"
                                :action="$store.state.settings.file_upload_url"
                                :headers ="headerObj"
                                :show-file-list="false"
                                accept="image/png, image/jpeg, image/gif, image/jpg"
                                :on-success="handleBatchpicSuccess">
                                  <img v-if="scope.row.pic" :src="scope.row.pic" class="avatar" style="width:60px;height:60px">
                                  <i v-else class="el-icon-plus avatar-uploader-icon" style="width:60px;height:60px;line-height:60px"></i>
                                </el-upload>
                            </template>
                      </el-table-column>
                      <el-table-column
                      header-align="center"
                        label="售价"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.price" clearable placeholder="请输入商品售价"></el-input>
                        </template>
                      </el-table-column>
                      <!-- <el-table-column
                      header-align="center"
                        label="成本价"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.cost"  clearable placeholder="请输入商品成本价"></el-input>
                        </template>
                      </el-table-column> -->
                      <el-table-column
                      header-align="center"
                        label="原价"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.ot_price" clearable placeholder="请输入商品原价"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                      header-align="center"
                        label="库存"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.stock" clearable placeholder="请输入库存"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                      header-align="center"
                        label="产品编号"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.bar_code" clearable placeholder="请输入产品编号"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" width="250" :label="'操作'">
                        <template>
                            <el-button v-waves   type="primary"  size='mini' icon="el-icon-edit" @click="batchAdd">
                                {{ "批量修改" }}
                            </el-button>
                            <el-button v-waves  type="danger" size='mini' icon="el-icon-delete"   @click="batchClear">
                                {{ "清空" }}
                            </el-button>
                        </template>
                        </el-table-column>
                    </el-table>
              </el-form-item>   
              <el-form-item :label="'商品属性'" v-if="data.attrs.length && formHeader.length  && data.spec_type == 1">
                    <el-table
                      border
                      :data="this.data.attrs"
                      style="width: 100%">

                        <el-table-column v-for="(n,v) in data.header" :key="v" :prop="n.value" :label="n.value" header-align="center">
                            <template   scope="scope">
                                <p style="text-align:center">{{scope.row.detail[n.value]}}</p>
                            </template>
                        </el-table-column>
      
                      <el-table-column  label="图片"  width="120"  header-align="center" style="text-align:center">
                            <template slot-scope="scope">
                                <el-upload
                                style="text-align:center"
                                  class="avatar-uploader"
                                :action="$store.state.settings.file_upload_url"
                                :headers ="headerObj"
                                :show-file-list="false"
                                :on-success="
                                      (response, file, fileList) =>
                                        handleItemSuccess(
                                          response,
                                          file,
                                          fileList,
                                          scope.$index)"
                                accept="image/png, image/jpeg, image/gif, image/jpg"
                                >
                                  <img v-if="scope.row.pic" :src="scope.row.pic" class="avatar" style="width:60px;height:60px">
                                  <i v-else class="el-icon-plus avatar-uploader-icon" style="width:60px;height:60px;line-height:60px"></i>
                                </el-upload>
                            </template>
                      </el-table-column>
                      <el-table-column
                      header-align="center"
                        label="售价"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.price" clearable placeholder="请输入商品售价"></el-input>
                        </template>
                      </el-table-column>
                      <!-- <el-table-column
                      header-align="center"
                        label="成本价"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.cost"  clearable placeholder="请输入商品成本价"></el-input>
                        </template>
                      </el-table-column> -->
                      <el-table-column
                      header-align="center"
                        label="原价"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.ot_price" clearable placeholder="请输入商品原价"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                      header-align="center"
                        label="库存"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.stock" clearable placeholder="请输入库存"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                      header-align="center"
                        label="产品编号"
                        >
                        <template slot-scope="scope">
                              <el-input v-model="scope.row.bar_code" clearable placeholder="请输入产品编号"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" width="250" :label="'操作'">
                        <template slot-scope="scope">
                            <el-button v-waves  type="danger" size='mini' icon="el-icon-delete"   @click="deleteAttrs(scope.$index)">
                                {{ "删除" }}
                            </el-button>
                        </template>
                        </el-table-column>
                    </el-table>
              </el-form-item>   
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="second">
              <el-form-item label="详情" prop="description">
                <editor
                v-model="data.description" v-if="this.item.dialogVisible"
              />
              </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="其他设置" name="third">
              <el-form-item label="上架">
                <el-switch v-model="data.is_show" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item label="热卖">
                <el-switch v-model="data.is_hot" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
               <el-form-item label="新品">
                <el-switch v-model="data.is_new" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item label="排序">
                <el-input-number v-model="data.sort"  :min="1" label="排序"></el-input-number>
              </el-form-item>
          </el-tab-pane>
        </el-tabs>     
                    

    <el-dialog :visible.sync="dialogVisible" width="30%" append-to-body>
              <img width="100%" :src="previewUrl" alt="">
    </el-dialog>  
    <el-form-item>
      <el-button type="primary" :disabled="$store.state.settings.ajaxButton" v-if="activeName !='first'" @click="back">上一步</el-button>
      <el-button type="primary" :disabled="$store.state.settings.ajaxButton" v-if="activeName !='third'" @click="next">下一步</el-button>
      <el-button type="primary" :disabled="$store.state.settings.ajaxButton" v-if="activeName=='third'" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {detail,edit,format} from '@/api/goods'
import waves from '@/directive/waves' // waves directive
import { getToken } from '@/utils/auth'
import videoUpload from '@/utils/videoUpload'
import {get_video_config} from '@/api/common'
import  editor  from "@/components/Editor";



export default {
  name: 'goodsEdit',
  components: {editor },
  directives: { waves }, // 引入指令
 
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    category: {
      type: Array,
      default: () => {
        return []
      }
    },

    rule_list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      activeName: 'first',
      loading:false,
      dialogVisible:false,
      ruleBool:false,
      previewUrl:'',
      headerObj: {
            'Authorization': 'Bearer ' + getToken()
        },
      rules: {
        
      },
      ruleIndex: '',
      newRule: false,//是否添加新规则
      //多属性header头
      formHeader:[],
     //批量添加属性
        batchAttr:[
            {
              pic: '',
              price: 0,
              cost: 0,
              ot_price: 0,
              stock: 0,
              bar_code: ''
          }
        ],
      // 规格数据
      formDynamic: {
          attrsName: '',
          attrsVal: ''
      },
      data: {
            header: [],
            image:[],
            imagepreviewurl:'',
            imagefileList:[],
            slider_image:[],
            slider_imagepreviewurl:'',
            slider_imagefileList:[],
            store_name:'',
            attr: [
                {
                  pic: '',
                  price: 0,
                  cost: 0,
                  ot_price: 0,
                  stock: 0,
                  bar_code: ''
              },
            ],
            items:[],
            attrs: [],
            spec_type:0,
            store_info:'',
            keyword:'',
            cate_id:'',
            unit_name:'',
            sort:'',
            sales:'',
            stock:'',
            is_show:1,
            is_hot:0,
            is_new:1,
            is_postage:true,
            browse:'',
            video_link:'',
            video_linkfileList:[],
            video_linkpercentage:0,
            description:'',

      }
    }
  },
  created() {
    const id = this.item.id
    this.id = id
    this.fetchData(id)
  },
  watch: {
    item: {
      handler(val, oldVal) {
        if (this.item.dialogVisible === true 
        ) {
          this.id = val.id
          this.fetchData(val.id)
        }
      },
      deep: true
    },
    // 'data.spec_type':function (n) {
    //         if (n==0) {
    //             this.data.attrs=[];
    //             this.data.items = [];
    //             this.ruleIndex = '';
    //             this.newRule = false;
    //         }
    //     },
  },
  methods: {
      back(){
            if(this.activeName == 'first'){
              return
            }else if(this.activeName == 'second'){
              this.activeName = 'first'
            }else if(this.activeName == 'third'){
              this.activeName = 'second'
            }
          },
          next() {
            if(this.activeName == 'first'){
              this.activeName = 'second'
            }else if(this.activeName == 'second'){
              this.activeName = 'third'
            }
          },

                 /**
             * 删除某条属性
             * @param index
             * */
            deleteAttrs: function (index) {
                var that = this;
                if (that.data.attrs.length > 1) {
                        that.data.attrs.splice(index, 1);
                    } else {
                     return   this.$message.error('请设置至少一个规则');
                }
                this.generates();
            },
            batchClear:function(){
                this.$set(this,'batchAttr',[
                  {
                    pic: '',
                    price: 0,
                    cost: 0,
                    ot_price: 0,
                    stock: 0,
                    bar_code: '',
                    weight: 0,
                    volume: 0,
                }
                ]);
            },
                /**
             * 批量添加
             * */
            batchAdd:function(){
                var that = this;
                this.$set(this.data,'attrs',this.data.attrs.map(function (item) {
  
                    if (that.batchAttr[0].pic) {
                        item.pic = that.batchAttr[0].pic;
                    }
                    if (that.batchAttr[0].price > 0){
                        item.price = that.batchAttr[0].price;
                    }
                  
                    if (that.batchAttr[0].cost > 0){
                        item.cost = that.batchAttr[0].cost;
                    }
                    if (that.batchAttr[0].ot_price > 0){
                        item.ot_price = that.batchAttr[0].ot_price;
                    }
                    if (that.batchAttr[0].stock > 0){
                        item.stock = that.batchAttr[0].stock;
                    }
                    if (that.batchAttr[0].bar_code != ''){
                        item.bar_code = that.batchAttr[0].bar_code;
                    }
                    if (that.batchAttr[0].weight > 0){
                        item.weight = that.batchAttr[0].weight;
                    }
                    if (that.batchAttr[0].volume > 0){
                        item.volume = that.batchAttr[0].volume;
                    }
                    return item;
                }));
            },
            generates: function () {
                var that = this;
                that.generate(1);
            },
            generate: function (type = 0) {
                var that = this;
                format({attrs:this.data.items,id:that.data.id,type:type}).then(function (res) {
                      that.$set(that.data, 'attrs', res.data.value);
                      that.$set(that.data, 'header', res.data.attr);
                      that.$set(that, 'formHeader', res.data.header);
                  }).catch(function (res) {
                      this.$message.error(res.msg);
                  });
            },
                /**
             * 创建属性
             * */
            createAttrName: function () {
                if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
                    if (this.data.items.find(function (val) {
                        if (val.value == this.formDynamic.attrsName) {
                            return true;
                        }
                    }.bind(this))) {
                     return   this.$message.error('添加的属性重复');
                    }
                    this.data.items.push({
                        value: this.formDynamic.attrsName,
                        detailValue: '',
                        attrHidden: false,
                        detail: [this.formDynamic.attrsVal]
                    });
                    this.formDynamic.attrsName = '';
                    this.formDynamic.attrsVal = '';
                    this.newRule = false;
                } else {
                    return this.$message.error('请添加完整的规格!');
                }
            },
          /**
             * 删除某条属性
             * @param index
             * */
            deleteItem: function (index) {
                this.data.items.splice(index, 1);
                this.generates();
            },
                 /**
             * 删除某个属性值
             * @param item 父级循环集合
             * @param inx 子集index
             * */
            deleteValue: function (item, inx) {
                if (item.detail.length > 1) {
                    item.detail.splice(inx, 1);
                } else {
                  return  this.$message.error('请设置至少一个属性');
                }
                this.generates();
            },
                  /**
             * 给某个属性添加属性值
             * @param item
             * */
            addDetail: function (item) {
                if (!item.detailValue) return false;
                if (item.detail.find(function (val) {
                    if(item.detailValue == val){
                        return true;
                    }
                })) {
                  return this.$message.error('添加的属性值重复');
                }
                item.detail.push(item.detailValue);
                item.detailValue = '';
                this.generates();
            },
              allRule:function () {
                
                if (this.ruleIndex !== '') {
                    var rule = this.rule_list[this.ruleIndex];
                    if (rule) {
                        this.ruleBool = true;
                        var rule_value = rule.rule_value.map(function (item) {
                            return item;
                        });
                        this.$set(this.data,'items',rule_value);
                        this.$set(this.data,'attrs',[]);
                        this.$set(this,'formHeader',[]);
                        return true;
                    }
                }
                
              return  this.$message.error('选择的属性无效');
            },
                handleimageExceed(){ 
               return this.$message.error('只能上传一张图片');
             },
            handleimagePreview(file){
                 this.dialogVisible = true;
                 this.previewUrl = file.url;
             },
            handleimageRemove(){
                 this.data.image = '';
             },
             handleimageSuccess(response, file, fileList) {
                this.$store.commit('settings/SET_AJAX_BUTTON', false);
                this.data.image= response.data.src;
            },
             beforeimageUpload(file) {
                this.$store.commit('settings/SET_AJAX_BUTTON', true);
                const isJPG = file.type === "image/jpeg";
                const isPNG = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPNG) {
               return this.$message.error("上传头像图片只能是 JPG 、PNG格式!");
                }
                if (!isLt2M) {
               return this.$message.error("上传头像图片大小不能超过 2MB!");
                }
               
            },
             handleslider_imagePreview(file) {
                this.dialogVisible = true;
                this.previewUrl = file.url;
            },
             handleslider_imageSuccess(response, file, fileList) {
                this.$store.commit('settings/SET_AJAX_BUTTON', false);
                 this.data.slider_image.push(response.data.src);
            },
             handleBatchpicSuccess(response, file, fileList) {
              this.$store.commit('settings/SET_AJAX_BUTTON', false);
                this.batchAttr[0].pic= response.data.src;
            },
            handlepicSuccess: function (response, file, fileList) {
                this.$store.commit('settings/SET_AJAX_BUTTON', false);
                this.data.attr[0]['pic'] = response.data.src;
            },
            handleItemSuccess: function (res, file, fileList, index,) {
                this.$store.commit('settings/SET_AJAX_BUTTON', false);
                this.data.attrs[index]['pic'] = res.data.src;
            },
             beforeslider_imageUpload(file) {
                this.$store.commit('settings/SET_AJAX_BUTTON', true);
                const isJPG = file.type === "image/jpeg";
                const isPNG = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPNG) {
                return this.$message.error("上传头像图片只能是 JPG 、PNG格式!");
                }
                if (!isLt2M) {
                return this.$message.error("上传头像图片大小不能超过 2MB!");
                }
            },
             handleslider_imageRemove(file,fileList) {
                const that = this;
                const fileSrc = file.url
                this.data.slider_imagefileList.forEach(function(element,key) {
                if(element.url === fileSrc){
                that.data.slider_image.splice(key, 1);
                }
                });
            },
                     handleRemovevideo_link() {
                        this.data.video_link = "";
                        this.data.video_linkfileList = [];
                    },
        videoChangevideo_link(file, fileList) {
              var that = this;
            get_video_config().then(res=>{
                   if(res.code && res.code==1){ 
                       videoUpload.upload(res.data.uploadType,{
                           token: "",
                           file: file,
                           accessKeyId: res.data.accessKey,
                           accessKeySecret: res.data.secretKey,
                           bucketName:res.data.storageName,
                           region: res.data.storageRegion,
                           domain: res.data.uploadUrl,
                           static_path: res.data.static_path,
                           static_url :res.data.static_url,
                           uploadIng:function (progress) {
                                that.$set(that.data,"video_linkpercentage",progress);
                          }
                     }).then(function (res) {
                             that.data.video_link = res.url;
                              that.$message.success("上传成功");
                              }).catch(function (err) {
                            that.$message.error(err);
                            });
                      }else{
                        return  this.$message.error("获取上传配置失败，请检查");
                }
             });
        },
             handleInput(value) {
            },
             handleClick(e, editor) {
            },
             clear() {
                this.$refs.editor.clear()
            },

    fetchData(id) {
          detail(id).then(response => {
            this.loading = false;
            let tempAttr = response.data.attr; 
            this.$set(this,'data',response.data);
            this.generate();
            this.data.attr = [];
             this.data.attr[0] = tempAttr;
            this.data.imagefileList=response.data.image ? response.data.image.split(',').map(item=>{return{name:item,url:item}}):[];
            this.data.slider_image=response.data.slider_image ? response.data.slider_image.split(',') : [];
            this.data.slider_imagefileList=response.data.slider_image ? response.data.slider_image.map(item=>{return{name:item,url:item}}):[];
            this.data.video_linkfileList=response.data.video_link ? [{name:response.data.video_link,url:response.data.video_link}] : [];
          }).catch(err => {
            console.log(err)
          })
        },
        
    handleSubmit:function () {
                var that = this;
                if (!that.data.cate_id) {
                  return  this.$message.error('请选择商品分类');
                }
                if (!that.data.store_name) {
                  return  this.$message.error('请填写商品名称');
                }
                if (!that.data.image) {
                 return   this.$message.error('请填选择商品图');
                }
                if (!that.data.slider_image.length) {
                 return   this.$message.error('请填选择商品轮播图');
                }
                if (that.data.spec_type == 0) {
                    if (!that.data.attr[0].pic) {
                   return     this.$message.error('请选择单规则图片');
                    }
                    if (that.data.attr[0].price == '') {
                   return   this.$message.error('请输入单规格价格');
                    }
                    if (that.data.attr[0].ot_price == '') {
                    return    this.$message.error('请输入单规格原价');
                    }
                    if (!that.data.attr[0].stock) {
                    return    this.$message.error('请输入单规格库存');
                    }
                    var attr = {
                        pic:that.data.attr[0].pic,
                        price:that.data.attr[0].price,
                        cost:that.data.attr[0].cost,
                        ot_price:that.data.attr[0].ot_price,
                        stock:that.data.attr[0].stock,
                        bar_code:that.data.attr[0].bar_code,
                    };
                    that.data.attrs = [attr];
                } else {
                    if (!that.data.attrs.length) {
                     return    this.$message.error('请添加多规格属性');
                    }
                    for(var index in that.data.attrs){
                        if(!that.data.attrs[index].pic){
                        return    this.$message.error('请选择多规格属性第'+(parseInt(index) +1)+'条的图片');
                        }
                        if(that.data.attrs[index].price === ''){
                        return    this.$message.error('请填写多规格属性第'+(parseInt(index) +1)+'条的价格');
                        }
                        if(that.data.attrs[index].ot_price === ''){
                         return   this.$message.error('请填写多规格属性第'+(parseInt(index) +1)+'条的原价');
                        }
                        if(that.data.attrs[index].stock === ''){
                        return    this.$message.error('请填写多规格属性第'+(parseInt(index) +1)+'条的库存');
                        }
                    }
                }
                edit(this.data).then(response => {
                    this.$store.commit('settings/SET_AJAX_BUTTON', true);
                    this.$message({
                      message: response.msg,
                      type: 'success',
                      duration: 1500,
                      onClose() {
                        if (that.$refs.form !== undefined) {
                          that.$refs.form.resetFields()
                          that.data = {};
                          that.data.attr = [];
                          that.data.attrs = [];
                          that.data.items = [];
                          that.activeName = 'first';
                        }
                        that.item.dialogVisible = false
                      }
                    })
                  })
            },
  }
}
</script>
